<template>
  <div>
    <el-row :gutter="20" class="hmBox">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" class="hmItem">
        <el-card shadow="always" class="homeBox homeBox1">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="6">
              <div class="hmIco"><img src='static/images/hmBox1Ico1.png' /></div>
            </el-col>
            <el-col :span="18">
              <div>
                <h3 class="hmTit1">总收入</h3>
                <p class="hmNum">
                  <span>87665.00</span>¥</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" class="hmItem">
        <el-card shadow="always" class="homeBox homeBox2">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="6">
              <div class="hmIco"><img src='static/images/hmBox1Ico2.png' /></div>
            </el-col>
            <el-col :span="18">
              <div>
                <h3 class="hmTit1">当月收入</h3>
                <p class="hmNum">
                  <span>739.00</span>¥</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8" class="hmItem">
        <el-card shadow="always" class="homeBox homeBox3">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="6">
              <div class="hmIco"><img src='static/images/hmBox1Ico3.png' /></div>
            </el-col>
            <el-col :span="18">
              <div>
                <h3 class="hmTit1">客户端数量</h3>
                <p class="hmNum">
                  <span>60</span>个</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div class="hmBotBg">
      <el-row class="hmBotCon">
        <el-col :xs="24" :sm="24" :md="12" class="hmRigItem">
          <router-link :to="'noLoginAccount'">
            <div class="hmLink">
              <div class="hmBotCir flexCon">
                <span><img src="static/images/hmBotImg1.png" /></span>
              </div>
              <div class="hmText">
                <h3 class="hmName">超过十天没有登录的商户</h3>
                <div class="hmBotNum">
                  <span>20</span>个</div>
              </div>
            </div>
          </router-link>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" class="hmRigItem">
          <router-link :to="'notSufficientFund'">
            <div class="hmLink">
              <div class="hmBotCir flexCon">
                <span><img src="static/images/hmBotImg2.png" /></span>
              </div>
              <div class="hmText">
                <h3 class="hmName">账户余额不足100元的客户</h3>
                <div class="hmBotNum">
                  <span>14</span>个</div>
              </div>
            </div>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { homeInfo } from "@/api/home"
export default {
  name: "Dashboard",
  data() {
    return {
      message: ""
    }
  },
  created() {
    // homeInfo().then((data)=>{
    //   this.message = data.userName;
    // })
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.flexCon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-pack: center;
  -webkit-flex-flow: column wrap;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  align-items: center;
}
.hmBox {
  padding-top: 50px;
  margin: 0 -17px !important;
}
.hmItem {
  position: relative;
  margin-bottom: 35px;
  padding-left: 17px !important;
  padding-right: 17px !important;
}
.homeBox {
  width: 100%;
  height: 215px;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
}
.homeBox1 {
  background-image: url("/static/images/hmBox1Bg1.jpg");
}
.homeBox2 {
  background-image: url("/static/images/hmBox1Bg2.jpg");
}
.homeBox3 {
  background-image: url("/static/images/hmBox1Bg3.jpg");
}
.homeBox .el-card__body {
  width: 100%;
}
.hmIco {
  padding-right: 10px;
  padding-top: 5px;
}
.hmIco img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.hmTit1 {
  font-size: 20px;
  margin: 5px auto;
  font-weight: normal;
}
.hmNum {
  font-size: 20px;
  margin: 5px auto;
}
.hmNum span {
  margin-right: 5px;
  font-size: 37px;
}
.hmBotBg {
  margin-bottom: 20px;
  background: #ffffff;
  box-shadow: 0 0 24px rgba($color: #000000, $alpha: 0.1);
  padding: 80px 8%;
  border-radius: 15px;
}
.hmLink {
  display: inline-flex;
  align-content: center;
  align-items: center;
  overflow: hidden;
}
.hmBotCir {
  width: 153px;
  height: 153px;
  border-radius: 50%;
  background: rgba($color: #38c272, $alpha: 0.1);
  margin-right: 40px;
}
.hmBotCir span {
  display: block;
  width: 100%;
}
.hmBotCir span img {
  max-width: 52%;
  margin: 0 auto;
  display: block;
}
.hmText {
  overflow: hidden;
  text-align: left;
}
.hmName {
  font-size: 22px;
  color: #333333;
  font-weight: normal;
  margin: 15px 0;
  transition: all 0.4s linear;
}
.hmBotNum {
  color: #0ead52;
  font-size: 20px;
}
.hmBotNum span {
  font-size: 37px;
  padding-right: 8px;
}

@media screen and (min-width: 991px) {
  .hmLink:hover .hmName {
    color: #0ead52;
  }
}
@media screen and (max-width: 1600px) {
  .hmBox {
    padding-top: 30px;
    margin: 0 -15px !important;
  }
  .hmItem {
    margin-bottom: 25px;
    padding: 0 15px !important;
  }
  .homeBox {
    height: 160px;
  }
  .hmTit1 {
    font-size: 16px;
  }
  .homeBox4 h3 {
    margin: 12px 0;
  }
  .hmNum {
    font-size: 16px;
  }
  .hmNum span {
    font-size: 24px;
  }
  .hmName {
    font-size: 18px;
  }
  .hmBotBg {
    padding: 60px 8%;
  }
  .hmBotCir {
    width: 130px;
    height: 130px;
  }
  .hmBotNum {
    font-size: 18px;
  }
  .hmBotNum span {
    font-size: 32px;
  }
}
@media screen and (max-width: 1400px) {
  .homeBox {
    height: 130px;
  }
  .homeBox4 h3 {
    margin: 10px 0;
  }
  .homeBox4 img {
    max-width: 22px;
    margin-right: 8px;
  }
  .hmTit1 {
    font-size: 16px;
  }
  .hmNum {
    font-size: 16px;
  }
  .hmNum span {
    font-size: 24px;
  }
  .hmBotCir {
    margin-right: 30px;
  }
  .hmName {
    font-size: 16px;
  }
  .hmBotNum {
    font-size: 16px;
  }
  .hmBotNum span {
    font-size: 26px;
  }
}
@media screen and (max-width: 1199px) {
  .hmBotBg {
    padding: 40px 5%;
  }
}
@media screen and (max-width: 991px) {
  .hmBotBg {
    padding: 15px;
  }
  .hmRigItem {
    margin: 15px auto;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .breadcrumbLocation[data-v-6beed8bc] {
    padding: 10px 15px;
  }
  .hmBox {
    padding-top: 20px;
  }
  .hmItem {
    margin-bottom: 15px;
  }
  .homeBox {
    padding: 0;
    height: auto;
  }
  .hmRigCon {
    display: block;
    overflow: hidden;
  }
  .hmBotCir {
    width: 110px;
    height: 110px;
    margin-right: 20px;
  }
}
@media screen and (max-width: 460px) {
  .hmBotCir {
    width: 80px;
    height: 80px;
    margin-right: 15px;
  }
  .hmName {
    margin: 5px 0;
    font-size: 15px;
  }
  .hmBotNum span {
    font-size: 22px;
  }
}
</style>
